<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }
        .main {
            width: 820px;
            height: 520px;
            border: 2px solid blue;
            margin-left: 10%;
        }
        input {
            border: radius 5px;
        }

        .right {
            text-align: right;

        }

        table tr td input, select,textarea {
            margin-left: 40px;
        }

        #submit {
            margin-left: 10%;
            padding: 3px 10px;
            width: 60px;
            background-color: yellow;
        }

        #reset, #cancel {
            background-color: rgb(76, 172, 210);
            padding: 3px 5px;
            width: 60px;
        }

        .box {
            height: 500px;
            width: 800px;
            border: 5px solid #666666;
            padding-left: 10px;
            margin-left: 5px;
            margin-top: 5px;
            background-color: white;
        }

        span {
            font-size: 10px;
            text-align: right;
        }

        #login {
            font-size: 12px;
            text-align: right;
            margin-top: 40px;

        }

        #login a {
            color: rgb(236, 140, 14);
        }

        .form {
            float: right;
            margin-right: 20px;
            margin-top: 7px;
        }

        .box2 {
            margin-top: 7px;
            float: left;
        }

        #reg {
            font-size: 20px;
            color: rgb(160, 160, 4);
        }

        #useR {
            font-size: 20px;
            color: gray;
        }

        img {
            width: 25px;
            height: 20px;
            vertical-align: middle;
        }

        .but {
            margin-top: 10px;
        }

        .length {
            width: 220px;
            height: 25px;
        }

        .short {
            width: 70px;
            height: 25px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="box">
            <div class="box2">
                <span id="reg">新用户注册</span> <br>
                <span id="useR">USER REGISTER</span>
            </div>
            <form action="success.html" onsubmit="return check()" name="登录注册页面" class="form">
                <table>
                    <tr>
                        <td class="right">用户名</td>
                        <td><input type="text" name="用户名" class="length"  id="name"
                                placeholder="请输入用户名"></td>
                    </tr>
                    <tr>
                        <td class="right">密码</td>
                        <td><input type="password" name="密码" id="password1" class="length" placeholder="请输入密码">
                        </td>
                    </tr>
                    <tr>
                        <td class="right"> 确认密码</td>
                        <td><input type="password" name="确认密码" class="length" id="password2" placeholder="请输入确认密码">
                        </td>
                    </tr>
                    <tr>
                        <td class="right">性别</td>
                        <td>
                            <input type="radio" name="性别" value="man" id="man">
                            <label for="man"> <img src="../image/man.png"> 男 </label>
                            <input type="radio" name="性别" value="woman" id="woman" checked>
                            <label for="woman"><img src="../image/women.png">女</label>
                        </td>
                    </tr>
                    <tr>
                        <td class="right">爱好 </td>
                        <td><input type="checkbox" name="兴趣" value="0">吃
                            <input type="checkbox" name="兴趣" value="1">喝
                            <input type="checkbox" name="兴趣" value="2" checked>玩
                            <input type="checkbox" name="兴趣" value="3">乐
                        </td>
                    </tr>
                    <tr>
                        <td class="right">所在学院</td>
                        <td>
                            <select class="length">
                                <option value="0">--请选择--</option>
                                <option value="1">机电工程学院</option>
                                <option value="2">材料科学与工程学院</option>
                                <option value="3" selected>计算机科学与工程学院</option>
                                <option value="4">化学与工程学院</option>
                                <option value="5">数学与统计学院</option>
                                <option value="6">马克思主义学院</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="right"> 联系电话</td>
                        <td><input type="tel" class="length" name="联系电话" id="tel"></td>
                    </tr>
                    <tr>
                        <td class="right">邮箱</td>
                        <td><input type="email" class="length" name="邮箱" id="email"></td>
                    </tr>
                    <tr>
                        <td class="right">入学时间:</td>
                        <td><input type="date" name="入学时间" class="length" id="time" onblur="checkTime()"
                                placeholder="yyy/mm/日"></td>
                    </tr>
                    <tr>
                        <td class="right">
                            <p>自我介绍</p>
                        </td>
                        <td><textarea name="自我介绍" cols="60" rows="5">大家好,我是来自计算机科学与工程学院计算机科学与技术的王其,喜欢文字,钟爱写作,爱好艺术,信奉"读万卷书,行万里路"的格言,优良的家庭氛围培养了我爱好读书的习性,而天生喜欢自由的我,经常利用假期到处走走,开阔自己的眼界,拓宽自己的视野,用自己的心去感悟生活,与历史对话.
                    </textarea>
                        </td>
                    </tr>
                    <tr>
                        <td class="right">验证码</td>
                        <td><input type="text" class="short"> <img src="../image/code.png"></td>
                    </tr>
                </table>
                <div class="but">
                    <input type="submit" name="register" value="注册" id="submit">
                    <input type="reset" name="reset" value="重填" id="reset">
                    <input type="button" name="cancel" value="取消" id="cancel">
                </div>
                <div id="login">已有账号?<a href="#">立即登录</a></div>
            </form>
        </div>
    </div>
</body>
<script>
    function check() {
        let name = document.getElementById("name").value;
        if (name.length == 0) {
            alert("用户名不能为空!")
            document.getElementById("name").focus();
            return false;
        }
        if (name.substr(0, 4) != "2024" || isNaN(name)) {
            alert("用户名必须以2024开头");
            document.getElementById("name").focus();
            return false;
        }
        let password1 = document.getElementById("password1").value;
        let password2 = document.getElementById("password2").value;
        if (password1.length < 6 || password1.length > 20) {
            alert("密码长度必须在6-20位!")
            document.getElementById("password1").focus();
            return false;
        }
        if (password1 != password2) {
            alert("确认密码必须密码相同!")
            document.getElementById("password2").focus();
            return false;
        }
        let email = document.getElementById("email").value;
        if (!email.includes("@")) {
            alert("邮箱必须包含 '@' 符号");
            document.getElementById("email").focus();
            return false;
        }
        let tel = document.getElementById("tel").value;
        if (tel.length != 11 || isNaN(tel)) {
            alert("手机号必须为11位!")
            document.getElementById("tel").focus();
            return false;
        }
        if (tel.substr(0, 1) == 0) {
            alert("手机号的第一位不能是0!")
            document.getElementById("tel").focus();
            return false;
        }
        let time = document.getElementById("time").value;
        if (time.substr(0, 4) < 2020 || time.substr(0, 4) > 2035) {
            alert("入学时间必须在2020-2035之间");
            document.getElementById("time").focus();
            return false;
        }
    }

</script>

</html>